import { getToolInfoByPage, addToolInfo, updateToolInfo, delToolInfo, exportToolInfo } from '@/services/device/toolInfo';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
const ToolInfo: React.FC<{}> = () => {
const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
    const ref = useRef(null);
  const columns: ProColumns[] = [
        {
        title: '序号',
        dataIndex: 'index',
        valueType: 'index',
        width: 80,
        },
        {
          title: '设备类别',
          dataIndex: 'category',
        },
        {
          title: '联系人',
          dataIndex: 'contact',
        },
        {
          title: '采购日期',
          dataIndex: 'contractDate',
        },
        {
          title: '采购编号',
          dataIndex: 'contractId',
        },
        {
          title: '成本中心',
          dataIndex: 'costcenter',
        },
        {
          title: '部门',
          dataIndex: 'dept',
        },
        {
          title: '工号',
          dataIndex: 'employeeId',
        },
        {
          title: '唯一标识',
          dataIndex: 'identification',
        },
        {
          title: '存储位置',
          dataIndex: 'location',
        },
        {
          title: '品牌',
          dataIndex: 'manufacturer',
        },
        {
          title: '计划寿命',
          dataIndex: 'planedLife',
        },
        {
          title: '数量',
          dataIndex: 'qty',
        },
        {
          title: '剩余寿命',
          dataIndex: 'remainingLife',
        },
        {
          title: '报废日期',
          dataIndex: 'scrappedDate',
        },
        {
          title: '领用日期',
          dataIndex: 'takeawayDate',
        },
        {
          title: '联系方式',
          dataIndex: 'telephone',
        },
        {
          title: '工具编号',
          dataIndex: 'toolId',
        },
        {
          title: '工具名称',
          dataIndex: 'toolName',
        },
        {
          title: '工具状态',
          dataIndex: 'toolState',
        },
        {
          title: '规格型号',
          dataIndex: 'toolType',
        },
        {
          title: '使用寿命',
          dataIndex: 'usedLife',
        },
        {
        title: '创建日期', //表头显示的名称
        search: false,
        dataIndex: 'createTime',
        },
        {
        title: '创建人', //表头显示的名称
        search: false,
        dataIndex: 'createName',
        },
        {
        title: '操作',
        valueType: 'option',
        key: 'option',
        fixed: 'right',
        render: (text, record, _, action) => [
        <a
                key="editKey"
                onClick={() => {

        setModalVisit(true);
        setCreateOrUpdate(true);
        setFormTitle('编辑');
        form.setFieldsValue({
        category: record.category,
        contact: record.contact,
        contractDate: record.contractDate,
        contractId: record.contractId,
        costcenter: record.costcenter,
        dept: record.dept,
        employeeId: record.employeeId,
        identification: record.identification,
        location: record.location,
        manufacturer: record.manufacturer,
        planedLife: record.planedLife,
        qty: record.qty,
        remainingLife: record.remainingLife,
        scrappedDate: record.scrappedDate,
        takeawayDate: record.takeawayDate,
        telephone: record.telephone,
        toolId: record.toolId,
        toolName: record.toolName,
        toolState: record.toolState,
        toolType: record.toolType,
        usedLife: record.usedLife,
        id: record.id,
        });
        }}
        >
        编辑
        </a>,
        <a
                key="deleteKey"
                onClick={() => {


        Modal.confirm({
        title: '删除',
        content: '确定要删除吗',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
        await delToolInfo({ id: record.id });
        actionRef.current.reload();
        },
        });

        }}
        >
        删除
        </a>,
        ],
        },
  ];
  const handleSubmit = async (values) => {
        setConfirmLoading(true);
        if (formTitle == '新建') {
          const result = await addToolInfo(values);
        if (result != null) {
          message.success('添加成功');
        }
        } else {
          await updateToolInfo(values);
        }
        setConfirmLoading(false);
        setModalVisit(false);
        actionRef.current.reload();
  };

  return (
  <PageHeaderWrapper title={false} breadcrumb={undefined}>
    <ProTable
        headerTitle="xx查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                    setCreateOrUpdate(false);
                    setFormTitle('新建');
                    form.resetFields();
                    setModalVisit(true);
                }}
                type="primary"
                >
                新建
                </Button>,
                <Button
                        key="button"
                        icon={<PlusOutlined />}
                onClick={() => {
                const filters = filterTran(ref.current.getFieldsValue());
                exportToolInfo({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                }).then((res) => {
                const aLink = document.createElement('a');
                document.body.appendChild(aLink);
                aLink.style.display = 'none';
                aLink.href = window.URL.createObjectURL(res);
                aLink.setAttribute('download', `ToolInfo.xlsx`);
                aLink.click();
                document.body.removeChild(aLink);
                });
                }}
                type="primary"
                >
                导出
                </Button>,
        ]}
        request={async (params = {}, sort, filter) => {

                const sorters = sortTran(sort);
                const filters = filterTran(params);
                const result = await getToolInfoByPage({ ...params, sorters: sorters, filters: filters });
                return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
                };

        }}
        columns={columns}
        scroll={{ x: 2000, y: 350 }}
        rowSelection={{}}
    />

    <ModalForm
        visible={modalVisit}
        title={formTitle}
        form={form}
        onFinish={handleSubmit}
        modalProps={{
        destroyOnClose: true,
        onCancel: () => {
            setModalVisit(false);
        },
        }}
    >
        <ProFormText  name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText  name="category" label="设备类别"
                 rules={[{ required: true, message: 'Please input your category!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="contact" label="联系人"
                 rules={[{ required: true, message: 'Please input your contact!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="contractDate" label="采购日期"
                 rules={[{ required: true, message: 'Please input your contractDate!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="contractId" label="采购编号"
                 rules={[{ required: true, message: 'Please input your contractId!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="costcenter" label="成本中心"
                 rules={[{ required: true, message: 'Please input your costcenter!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="dept" label="部门"
                 rules={[{ required: true, message: 'Please input your dept!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="employeeId" label="工号"
                 rules={[{ required: true, message: 'Please input your employeeId!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="identification" label="唯一标识"
                 rules={[{ required: true, message: 'Please input your identification!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="location" label="存储位置"
                 rules={[{ required: true, message: 'Please input your location!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="manufacturer" label="品牌"
                 rules={[{ required: true, message: 'Please input your manufacturer!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="planedLife" label="计划寿命"
                 rules={[{ required: true, message: 'Please input your planedLife!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="qty" label="数量"
                 rules={[{ required: true, message: 'Please input your qty!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="remainingLife" label="剩余寿命"
                 rules={[{ required: true, message: 'Please input your remainingLife!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="scrappedDate" label="报废日期"
                 rules={[{ required: true, message: 'Please input your scrappedDate!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="takeawayDate" label="领用日期"
                 rules={[{ required: true, message: 'Please input your takeawayDate!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="telephone" label="联系方式"
                 rules={[{ required: true, message: 'Please input your telephone!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="toolId" label="工具编号"
                 rules={[{ required: true, message: 'Please input your toolId!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="toolName" label="工具名称"
                 rules={[{ required: true, message: 'Please input your toolName!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="toolState" label="工具状态"
                 rules={[{ required: true, message: 'Please input your toolState!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="toolType" label="规格型号"
                 rules={[{ required: true, message: 'Please input your toolType!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="usedLife" label="使用寿命"
                 rules={[{ required: true, message: 'Please input your usedLife!' }]}
        disabled={createOrUpdate}  />
    </ModalForm>
  </PageHeaderWrapper>
  );
  };
  export default ToolInfo;
